<template>
  <div class="Home">
    <el-container>
      <el-aside class="aside">
        <Menu />
      </el-aside>
      <el-container>
        <el-header class="header">
          <Header />
        </el-header>
        <el-main class="main" :style="{ height: mainHeight + 'px !important' }">
          <div
            class="mainOuter"
            :style="{ height: mainHeight - 48 + 'px !important' }"
          >
            <div class="mainInner">
              <transition name="slide-fade">
                <keep-alive>
                  <!-- 这里是会被缓存的视图组件 -->
                  <router-view
                    v-if="$route.meta.keepAlive"
                    :height="mainHeight"
                    :permission="list"
                  />
                </keep-alive>
              </transition>
              <transition name="slide-fade">
                <!-- 这里是不被缓存的视图组件 -->
                <router-view
                  v-if="!$route.meta.keepAlive"
                  :height="mainHeight"
                  :permission="list"
                />
              </transition>
              <el-backtop
                target=".mainInner"
                :visibility-height="100"
                :right="30"
                :bottom="40"
              ></el-backtop>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from "../components/Menu";
import Header from "../components/Header";

export default {
  name: "Home",
  data() {
    return {
      mainHeight: 1200,
      // (document.documentElement.clientHeight || document.body.clientHeight) -
      // 110, //主体内容高度
      headerHeight: 0, //顶部高度
      list: []
    };
  },
  components: {
    Menu,
    Header
  },
  created() {
    const list = JSON.parse(sessionStorage.getItem("list"));
    this.list = this.flatten(list);
  },
  mounted() {
    const that = this;
    that.resizeHeight();
    window.addEventListener("resize", that.resizeHeight, false);
  },
  destroyed() {
    const that = this;
    window.removeEventListener("resize", that.resizeHeight, false);
  },
  methods: {
    resizeHeight(e) {
      // const height =
      //   document.documentElement.clientHeight || document.body.clientHeight;
      // this.mainHeight = height - 110;
    },
    flatten(arr) {
      let res = [];
      if (Array.isArray(arr)) {
        for (let i = 0; i < arr.length; i++) {
          if (Array.isArray(arr[i].child)) {
            res.push(arr[i]);
            res = res.concat(this.flatten(arr[i].child));
          } else {
            res.push(arr[i]);
          }
        }
      }
      return res;
    }
  }
};
</script>

<style scoped>
.aside {
  width: auto !important;
  min-height: 100vh;
  background-color: #304156 !important;
}

.header {
  position: relative;
  padding: 0;
  height: auto !important;
}

.Home >>> .el-main,
.el-main {
  padding: 0 !important;
}

.main {
  /* background: #FBFBFD; */
}

.mainOuter {
  overflow: hidden;
  position: relative;
  margin: 24px;
}

.mainInner {
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slide-fade {
  position: absolute;
  left: 0;
  right: 0;
}

.slide-fade-enter-active {
  transition: all 1.2s ease;
}

.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(2, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  left: 0;
  right: 0;
  transform: translateX(100px);
  opacity: 0;
}
</style>
